<template>
	<view class="img-comprs-compt">
		<uni-file-picker :disabled="btnFla" :auto-upload="false" limit="1" mode="grid"
			:disablePreview="false" v-model="imgList" file-mediatype="image" :sizeType="sizeType" ref="imgs"
			@select="imgSelect" @progress="imgProgress" @success="imgSuccess" @fail="imgFail" @delete="delImg">
			<!-- <textstyle="font-size: 20px;font-weight: 500;">+</text> -->
		</uni-file-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: '',
				imgList: [],
				sizeType: ['original', 'compressed'],
				btnFla: false
			}
		},
		onLoad(e) {},
		created() {},
		mounted() {},
		methods: {
			// 手动上传
			upload() {
				// 插件上传
				this.$refs.imgs.upload()
			},
			// 获取上传状态
			imgSelect(e) {
				console.log('选择文件：', e)
				e.tempFiles.map((item, index) => {
					if (`jpg,jpeg,png`.indexOf(item.extname) > -1) {
						if (item.size > 522183) {
							this.compress(item, index);
						} else {
							this.upload()
						}
					} else {
						this.upload()
					}
				})
			},
			// 删除附件
			delImg(e) {
				const _this = this
				let str = '删除后该图片将无法在页面展示，请谨慎删除！'
				let tt = `删除图片？`
				if (this.btnFla) {
					str = '点击编辑按钮后方可修改！'
					tt = '不能删除！'
				}
				uni.showModal({
					title: tt,
					content: str,
					success: async (res) => {
						if (res.confirm) {
							if (_this.btnFla) {
								const file = this.img.split(',')
								_this.imgList = [{
									fileID: `${_this.$baseImgUrl}${file[0]}`,
									url: `${_this.$baseImgUrl}${file[0]}`,
									name: file[1]
								}]
								_this.$emit('delImg', _this.imgList)
							} else {
								const annexFn = uniCloud.importObject('annex-del-fn')
								await annexFn.delFileFn([e.tempFile.fileID])
							}

						} else {
							const file = this.img.split(',')
							_this.imgList = [{
								fileID: `${_this.$baseImgUrl}${file[0]}`,
								url: `${_this.$baseImgUrl}${file[0]}`,
								name: file[1]
							}]
							_this.$emit('delImg', _this.imgList)
						}
					},
					fail: () => {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
					}
				})
			},
			// 获取上传进度
			imgProgress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			imgSuccess(e) {
				const url = e.tempFilePaths[0].split('/')
				this.img = `${url[url.length - 1]},${e.tempFiles[0].name}`
				console.log('上传成功', e, this.img)
				this.$emit('imgSuccess', this.img)
			},
			// 上传失败
			imgFail(e) {
				console.log('上传失败：', e)
			},
			compress(r, index) { // 图片压缩
				var that = this;
				const num = r.size > 2251836 ? 3 : r.size < 1225836 ? 34 : 8
				console.log(r.size, '>522183原图大小', num, '压缩比例');
				if (r.size) {
					wx.compressImage({
						src: r.path,
						quality: num, // 0-100,越高却清晰
						success(res) {
							that.SizeImg(r, res, index, num);
						}
					})
				}
			},
			SizeImg(r, res, n, num) { // 查询图片大小
				let that = this;
				const arr = []
				wx.getFileInfo({ //查询压缩后的图片大小
					filePath: res.tempFilePath,
					success(ys) {
						let h = that.$refs.imgs.filesList[n].image.height * ((100 - num) / 100)
						let w = that.$refs.imgs.filesList[n].image.width * ((100 - num) / 100)
						console.log('压缩后的文件大小：' + ys.size);
						console.log('压缩后的临时路径：' + res.tempFilePath);
						that.$refs.imgs.filesList[n].path = res.tempFilePath
						that.$refs.imgs.filesList[n].size = ys.size
						that.$refs.imgs.filesList[n].url = res.tempFilePath
						that.$refs.imgs.filesList[n].image = {
							height: h,
							location: res.tempFilePath,
							width: w
						}
						that.$refs.imgs.filesList[n].width = w
						that.$refs.imgs.filesList[n].height = h
						that.$refs.imgs.filesList[n].location = res.tempFilePath
						that.upload()
					}
				})
			}
		}
	}
</script>

<style>
	.img-comprs-compt {
		display: inline-block;
		width: 50%;
	}
</style>
<style lang="scss">
</style>